<template>
  <div>
    <div>
      <!-- 显示组件所在位置 -->
      <router-view />
    </div>
    <div class="footer" v-show="isok">
      <div
        v-for="(item,index) in icon"
        :key="item.name"
        @click="iconClk(index)"
        :style="{color:(item.isclick == true?'#fd5900':'#858585')}"
      >
        <template v-if="item.name == '购物车'">
          <el-badge :value="num" class="item">
            <el-button size="small">
              <i class="iconfont" :class="item.url"></i>
              <p>{{item.name}}</p>
            </el-button>
          </el-badge>
        </template>
        <template v-else>
          <i class="iconfont" :class="item.url"></i>
          <p>{{item.name}}</p>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  components: {
    // bootstrap
    // Footer
  },
  data() {
    return {
      tabPosition: "left",
      isok: true,
      phonenumber: "",
      icon: [
        {
          name: "首页",
          url: "icon-shouye",
          isclick: true,
          path: "/home"
        },
        {
          name: "分类",
          url: "icon-tubiaozhizuomoban",
          isclick: false,
          path: "/type"
        },
        {
          name: "会员中心",
          url: "icon-huiyuan",
          isclick: false,
          path: "/vip"
        },
        {
          name: "购物车",
          url: "icon-gouwuche",
          isclick: false,
          path: "/car"
        },
        {
          name: "个人",
          url: "icon-geren",
          isclick: false,
          path: "/mine"
        }
      ]
    };
  },
  methods: {
    iconClk(index) {
      this.icon.forEach(i => {
        i.isclick = false;
      });
      this.icon[index].isclick = true;
      this.$router.push(this.icon[index].path);
    }
  },
  created() {
    this.icon.forEach(item => {
      if (item.path == this.$route.path || this.$route.path == "/") {
        this.isok = this.isok;
      } else {
        this.isok = !this.isok;
      }

      item.isclick = false;
      if (this.$route.path == item.path) {
        item.isclick = true;
      }
    });
    let phonenumber = this.$store.state.common.user.phone;
    this.$store.dispatch("getGoodsList", { phonenumber });
    this.phonenumber = phonenumber;
  },
  watch: {
    $route(to, from) {
      if (to.path != from.path) {
        window.location.reload();
      }
    }
  },
  computed: {
    num() {
      // let phonenumber = this.$store.state.common.user.phone;
      let num = 0;
      if (this.phonenumber) {
        return (num = this.$store.state.cart.goodslist.length);
      } else {
        return num;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import url(./font/iconfont.css);
html,
body {
  height: 100%;
}

@function vw($px) {
  @return ($px / 750) * 100vw;
}

.footer {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: vw(65);
  left: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  border-top: 1px solid #ccc;

  div {
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    color: #858585;
    display: flex;
    flex-direction: column;
    justify-content: center;
    // margin-top: vw(15);

    i {
      font-size: vw(22);
      line-height: vw(22);
      display: inline-block;
    }
    p {
      font-size: vw(18);
      line-height: vw(18);
    }
  }

  /deep/.el-badge {
    top: --0.066667rem;
    /deep/.el-button {
      border: none;
    }
    /deep/.el-button--small {
      padding: 0;
    }
    // /deep/.el-button:active{
    //   color: #fd5900;
    // }
    /deep/.el-button:hover {
      color: #fd5900;
      background: #fff;
    }
  }
}
</style>
